<template>
    <XModalButton ref='modalRef' :title='props.title' :confirm='submit' @open='open' @close='close'>
        <slot></slot>
        <template #content>
            <div :class='$style.form'>
                <a-form ref='formRef' :model='formData' :rules='rules' :label-col='{ span: 4 }' :wrapper-col="{ span: 18 }">
                    <a-form-item label='表册号' name='code'>
                        <a-input v-model:value='formData.code' />
                    </a-form-item>
                    <a-form-item label='表册名称' name='name'>
                        <a-input v-model:value='formData.name' />
                    </a-form-item>
                    <a-form-item label='表册类型' name='type'>
                        <a-input v-model:value='formData.type' />
                    </a-form-item>
                    <a-form-item label='区域名称' name='areaName'>
                        <a-input v-model:value='formData.areaName' />
                    </a-form-item>
                    <a-form-item label='抄表员' name='user'>
                        <a-input v-model:value='formData.user' />
                    </a-form-item>
                    <a-form-item label='备注' name='remark'>
                        <a-input v-model:value='formData.remark' />
                    </a-form-item>
                </a-form>
            </div>
        </template>
    </XModalButton>
</template>

<script lang='ts' setup>
    import { nextTick, reactive, ref } from 'vue'
    import { saveMeterFolderApi } from '@/api/meterFolderManagement'
    import { message } from 'ant-design-vue';

    interface FormDataType {
        code : any;
        name : any;
        type : any;
        areaName : any;
        user : any;
        remark : any;
    }

    const props = defineProps<{
        title : string,
        formData? : FormDataType
    }>()

    const emit = defineEmits<{
        (e : 'finish') : void
    }>()

    const modalRef = ref()

    const formData = reactive<FormDataType>({
        code : '',
        name : '',
        type : '',
        areaName : '',
        user : '',
        remark : ''
    })

    const rules = reactive<{
        [key in keyof (typeof formData)]? : any[]
    }>({
        code : [
            {
                required : true,
                message : '请输入表册号'
            }
        ],

        name : [
            {
                required : true,
                message : '表册名称'
            }
        ],

        type : [
            {
                required : true,
                message : '请选择表册类型'
            }
        ],

        areaName : [
            {
                required : true,
                message : '请选择区域'
            }
        ],

        user : [
            {
                required : true,
                message : '请选择抄表员'
            }
        ]
    })

    const formRef = ref()


    function open() {
        if(props.formData) {
            for(let k in props.formData) {
                if(k in formData) {
                    formData[k] = props.formData[k]
                }
            }
        }
    }

    function close() {
        formRef.value.resetFields()
        nextTick(() => {
            formRef.value.clearValidate()
        })
    }

    async function submit() {
        try {
            await formRef.value.validate()
            const rs = await saveMeterFolderApi(formData)
            if(rs.success) {
                emit('finish')
                modalRef.value.close()
                message.success('保存成功');
            }else {
                message.error(rs.msg);
            }

        } catch (error) {
            
        }
    }

</script>

<style scoped lang='scss' module>
    .form{
        width: 500px;
    }
</style>